<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                /* 设置弧度 */
                /* width: 400px;
                height: 200px;
                border: 2px solid green;
                border-radius: 20px;                 */
                /* 生成圆 */
                /* width: 200px;
                height: 200px;
                border: 2px solid green;
                border-radius: 100px;
                border-radius: 50%; */
                /* 生成矩形圆 */
                /* width: 400px;
                height: 200px;
                border: 2px solid green;
                border-radius: 100px; */
                /* 四个角单独设置 */
                width: 400px;
                height: 200px;
                border: 2px solid green;
                border-top-right-radius: 1px;
                border-top-left-radius: 5px;
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 20px;
            }
        </style>
    </head>
    <body>
        <!-- 圆角矩形--border-radius,length:内切圆半径(越大弧度越大) -->
        <!-- 生成圆形--width+height相同,length为宽/高的一半/设置为50% -->
        <!-- 生成矩形圆--borader-radius中length为height的一半 -->
        <!-- 对四个角单独设置 -->
        <!-- 右上--border-top-right-radius -->
        <!-- 左上--border-top-left-radius -->
        <!-- 右下--border-bottom-right-radius -->
        <!-- 坐下--border0-bottom-left-radius -->
        <div></div>
    </body>
</html>